import {
  WeaDialog,
  WeaSearchGroup,
  WeaInput,
  WeaSelect,
  WeaNewScroll,
  WeaFormItem,
} from "ecCom";
import {
  Form,
  Input,
  Button,
  Menu,
  Select,
  Switch,
  Icon,
  Tabs,
  message,
} from "antd";
import CoworkConstant from "../../../util/CoworkConstant";
import CoworkTypeUser from "./CoworkTypeUser";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import Apis from "../../../apis/cowork";
import CoworkMainTypeInfo from "./CoworkMainTypeInfo";
import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

@inject("coworkMainStore")
@observer
class PlatForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "3",
    };
  }

  //1
  componentDidMount() {
    this.props.initFunc && this.props.initFunc(this);

    const { coworkMainStore } = this.props;
    coworkMainStore.getCoworkMainTypeComboList();
  }

  render() {
    //4 后台typeVo数据
    const { coworkMainStore } = this.props;
    const { CoMainTypeList } = toJS(coworkMainStore.comboList);
    const { getFieldProps } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6, offset: 3 },
      wrapperCol: { span: 9 },
    };
    // let departmentId =  CoMainTypeList && CoMainTypeList[0].key;

    return (
      <div className="plat-form">
        <Form>
          <div className="plat-form-item">
            <WeaFormItem
              {...formItemLayout}
              label={getLabel(195, "名称") + ":"}
            >
              <WeaInput
                className="plat-input"
                {...getFieldProps("typename", {
                  rules: [{ required: true, message: "名称不能为空" }],
                })}
              />
            </WeaFormItem>
          </div>

          <div className="plat-form-item">
            <WeaFormItem
              labelCol={{ span: 6, offset: 3 }}
              wrapperCol={{ span: 11 }}
              label={getLabel(178, "类别") + ":"}
            >
              <div className="plat-form-items">
                <div className="plat-form-detail">
                  {CoMainTypeList && (
                    <WeaSelect
                      className="plat-select"
                      options={CoMainTypeList}
                      {...getFieldProps("departmentid", { initialValue: "1" })}
                    />
                  )}
                </div>
                <em
                  className="icon-coms-Add-to-hot cowork-dropIcon-public plat-dropIcon"
                  onClick={this.openMainType}
                />
              </div>
            </WeaFormItem>
          </div>

          <div className="plat-form-item">
            <WeaFormItem
              {...formItemLayout}
              label={getLabel(31449, "需要审批") + ":"}
            >
              <Switch
                {...getFieldProps(
                  "isApproval",
                  { valuePropName: "checked" },
                  { initialValue: false }
                )}
              />
            </WeaFormItem>
          </div>

          <div className="plat-form-item">
            <WeaFormItem
              {...formItemLayout}
              label={getLabel(18576, "允许匿名") + ":"}
            >
              <Switch
                {...getFieldProps(
                  "isAnonymous",
                  { valuePropName: "checked" },
                  { initialValue: false }
                )}
              />
            </WeaFormItem>
          </div>
        </Form>
        <CoworkMainTypeInfo ref="mainType" />
      </div>
    );
  }

  //提交表单验证
  validateFields = (callback) => {
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        return;
      }
      callback(values);
    });
  };

  //编辑版块显示数据使用
  setFieldsValue = (params) => {
    this.props.form.setFieldsValue(params);
  };

  //新增类别
  /* addCategory = () => {
   this.refs.category.open();
   }*/

  //清除表单选项内容
  clear = () => {
    let departmentId = "";
    let { comboList } = this.props.coworkMainStore;
    comboList = toJS(comboList);
    if (comboList && comboList.CoMainTypeList.length !== 0) {
      departmentId = String(comboList.CoMainTypeList[0].id);
    }
    let initValue = {
      typename: "",
      departmentid: departmentId,
      isApproval: false,
      isAnonymous: false,
    };
    this.props.form.setFieldsValue(initValue);
  };

  openMainType = () => {
    this.refs.mainType.wrappedInstance.open();
  };
}

PlatForm = Form.create()(PlatForm);

@inject("coworkMainStore")
class CoworkTypeInfo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: "",
      platVisible: false,
      tabKey: "plat",
    };
  }

  render() {
    let { id, platVisible, tabKey } = this.state;
    return (
      <WeaDialog
        style={{ width: 600, height: 400 }}
        visible={platVisible}
        onCancel={this.back}
        title={id ? getLabel(382642, "编辑版块") : getLabel(129747, "新建版块")}
        icon={CoworkConstant.iconClassName}
        iconBgcolor={CoworkConstant.iconBgColor}
        buttons={[
          tabKey == "plat" && (
            <Button type="primary" onClick={this.submit}>
              {getLabel(30986, "保存")}
            </Button>
          ),
          id ? null : (
            <Button type="primary" onClick={this.submitAndEnterEdit}>
              {getLabel(32159, "保存并进入详细设置")}
            </Button>
          ),
          <Button type="primary" onClick={this.back}>
            {getLabel(1290, "返回")}
          </Button>,
        ]}
      >
        <WeaNewScroll height={475}>
          <div className="cowork-new-plat">
            {id && (
              <Tabs
                className="plat-tabs"
                activeKey={tabKey}
                onChange={this.changeTab}
              >
                <TabPane tab={getLabel(1361, "基本信息")} key="plat"></TabPane>
                <TabPane
                  tab={`${getLabel(2097, "负责人")}${getLabel(130599, "设置")}`}
                  key="principal"
                >
                  <CoworkTypeUser id={id} coTypeId={id} type="manager" />
                </TabPane>
                <TabPane
                  tab={`${getLabel(382643, "创建人")}${getLabel(
                    130599,
                    "设置"
                  )}`}
                  key="creater"
                >
                  <CoworkTypeUser id={id} coTypeId={id} type="members" />
                </TabPane>
              </Tabs>
            )}

            <div
              className={tabKey == "plat" || !id ? "plat-show" : "plat-hide"}
            >
              <PlatForm initFunc={this.platformInit} />
            </div>
          </div>
        </WeaNewScroll>
      </WeaDialog>
    );
  }

  platformInit = (platForm) => {
    this.platForm = platForm;
  };

  open = (id, key) => {
    this.setState(
      {
        platVisible: true,
        id: id,
        tabKey: key || "plat",
      },
      () => {
        if (id) {
          Apis.getTypeVo({ id: id }).then((result) => {
            if (result.status === "1" && result.coworkTypeMap) {
              let info = result.coworkTypeMap;
              this.platForm.setFieldsValue({
                typename: info.typename,
                departmentid: info.departmentid,
                isApproval: info.isApproval == "1",
                isAnonymous: info.isAnonymous == "1",
              });
            } else {
              message.error(getLabel(189, "读取协作版块信息失败", "error"));
            }
          });
        } else {
          this.platForm && this.platForm.clear();
        }
      }
    );
  };

  back = () => {
    this.setState({
      platVisible: false,
    });
  };

  //提交
  submit = () => {
    let id = this.state.id;
    this.save(() => {
      this.back();
      this.props.callback && this.props.callback();
    });
  };

  //保存并进入详细设置
  submitAndEnterEdit = () => {
    this.save((result) => {
      if (result.flag && result.coworkTypeMap) {
        let info = result.coworkTypeMap;
        this.setState({
          id: info.id,
        });
        this.platForm.setFieldsValue({
          id: String(info.id),
          typename: info.typename,
          departmentid: info.departmentid,
          isApproval: info.isApproval == "1",
          isAnonymous: info.isAnonymous == "1",
        });
        this.props.callback && this.props.callback();
      } else {
        message.error(getLabel(190, "保存失败，不能进入详细设置", "error"));
      }
    });
  };

  save = (callback) => {
    //传入values
    let params,
      id = this.state.id;
    this.platForm.validateFields((values) => {
      params = {
        operationType: id ? "edit" : "add",
        id: id ? id : "",
        typename: values.typename,
        departmentid: values.departmentid,
        isApproval: values.isApproval ? "1" : "0",
        isAnonymous: values.isAnonymous ? "1" : "0",
      };
      const { coworkMainStore } = this.props;
      coworkMainStore.saveOrUpdateCoworkTypeVo(params, callback);
    });
  };

  changeTab = (key) => {
    this.setState({
      tabKey: key,
    });
  };
}

export default CoworkTypeInfo;
